{% extends 'layout.html' %}

{% block content %}
<div class="container">
    <div style="margin-bottom: 10px">
        <a class="btn btn-success" href="/EquipmentRoom_info/EquipmentRoom/add/">
            <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
            新增
        </a>
        <a class="btn btn-success" href="/user_info/upload/file/">
           <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
            导入EXCEL
        </a>
          <a class="btn btn-success" href="/user_info/export/">
            <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
            导出EXCEL
        </a>

        <div style='float: right;width: 300px;margin-top: -10px'>
            <form method="get" class="navbar-form navbar-left" role="search">

                <div class="input-group">
                    <input type="text" class="form-control" placeholder="机房，楼层，专业，负责人......" name="values">
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="submit">Go!</button>
                    </span>
                </div>
            </form>

        </div>
    </div>

    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
            机房管理列表
        </div>

        <!-- Table -->
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>机房</th>
                <th>楼层</th>
                <th>专业归属</th>
                <th>负责人</th>
                <th>描述</th>
            </tr>
            </thead>
            <tbody>
            {% for obj in queryset %}
            <tr class="clickable-row" data-id="{{ obj.id }}">
                <th width="20">{{ obj.id }}</th>
                <td align="center" width="100">{{ obj.Core_EquipmentRoom }}</td>
                <td align="center" width="120">{{ obj.floor_room }}</td>
                <td align="center" width="120">{{ obj.EquipmentRoom_type }}</td>
                <td align="center" width="120">{{ obj.EquipmentRoom_user_info}}</td>
                <td align="center" >{{ obj.description }}</td>
                <td align="center" width="100">
                    <a class="btn btn-primary btn-xs" href="/user_info/depart/{{ obj.id }}/edit/">编辑</a>
                    <a class="btn btn-danger btn-xs" href="/user_info/depart/{{ obj.id }}/delete/">删除</a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="clearfix">
        <ul class="pagination">
            {{ page_string }}
        </ul>

    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 为所有具有clickable-row类的行添加点击事件监听器
    $('.clickable-row').click(function() {
        // 移除所有行的selected-row类
        $('.clickable-row').removeClass('selected-row');

        // 给当前行添加selected-row类
        $(this).addClass('selected-row');
    });

    // 可选：如果页面有分页，并且新页面加载时希望保持之前选中的行（这通常需要后端支持来传递选中的行ID）
    // 你可以在这里添加一个函数来检查URL参数或localStorage，并相应地设置选中行
    // 例如：var selectedId = getQueryStringParam('selectedId'); if (selectedId) { $('tr[data-id="' + selectedId + '"]').addClass('selected-row'); }
});
</script>
{% endblock %}
